<!DOCTYPE html>






<html class="theme-next gemini use-motion" lang="zh-Hans">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />


















  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />







<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=5.1.3" rel="stylesheet" type="text/css" />


  <link rel="apple-touch-icon" sizes="180x180" href="/images/favicon.ico?v=5.1.3">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon.ico?v=5.1.3">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon.ico?v=5.1.3">


  <link rel="mask-icon" href="/images/logo.svg?v=5.1.3" color="#222">





  <meta name="keywords" content="vue,webpack," />










<meta name="description" content="用vue写了些项目,但一直没有提取常用的祖件,现在尝试抽象提取出一些">
<meta name="keywords" content="vue,webpack">
<meta property="og:type" content="article">
<meta property="og:title" content="vue小组件制造之路">
<meta property="og:url" content="https://zhangyuhan2016.gitee.io/2017/12/29/vue-demo/index.html">
<meta property="og:site_name" content="zhangyuhan2016">
<meta property="og:description" content="用vue写了些项目,但一直没有提取常用的祖件,现在尝试抽象提取出一些">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="https://zhangyuhan2016.gitee.io/images/picker.gif">
<meta property="og:image" content="https://zhangyuhan2016.gitee.io/images/vue-yzm.gif">
<meta property="og:updated_time" content="2018-03-20T03:13:38.366Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="vue小组件制造之路">
<meta name="twitter:description" content="用vue写了些项目,但一直没有提取常用的祖件,现在尝试抽象提取出一些">
<meta name="twitter:image" content="https://zhangyuhan2016.gitee.io/images/picker.gif">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Gemini',
    version: '5.1.3',
    sidebar: {"position":"right","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="https://zhangyuhan2016.gitee.io/2017/12/29/vue-demo/"/>





  <title>vue小组件制造之路 | zhangyuhan2016</title>









</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">
<header style="position: fixed;z-index: 99999999;background-color: #eee;width: 100%;text-align: center;">
    <h3>感谢您的关注，最新博客已迁移至 <mark style="background-color: #07c160;padding: 4px;"><a style="color: #fff;" href="https://blog.hi-zhang.com" target="_blank">blog.hi-zhang.com</a></mark> </h3>
</header>






  <div class="container sidebar-position-right page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">


    <div class="custom-logo-site-title">
      <a href="/"  class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">zhangyuhan2016</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>

        <p class="site-subtitle"></p>

  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">



    <ul id="menu" class="menu">


        <li class="menu-item menu-item-home">
          <a href="/" rel="section">

              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />

            首页
          </a>
        </li>


        <li class="menu-item menu-item-tags">
          <a href="/tags/" rel="section">

              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br />

            标签
          </a>
        </li>


        <li class="menu-item menu-item-archives">
          <a href="/archives/" rel="section">

              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br />

            归档
          </a>
        </li>



    </ul>



</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">


  <div id="posts" class="posts-expand">








  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">



  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://zhangyuhan2016.gitee.io/2017/12/29/vue-demo/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="zhangyuhan2016">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="https://avatars3.githubusercontent.com/u/18086072?s=460&v=4">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="zhangyuhan2016">
    </span>


      <header class="post-header">



          <h1 class="post-title" itemprop="name headline">vue小组件制造之路</h1>


        <div class="post-meta">
          <span class="post-time">

              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>

                <span class="post-meta-item-text">发表于</span>

              <time title="创建于" itemprop="dateCreated datePublished" datetime="2017-12-29T17:34:21+08:00">
                2017-12-29
              </time>



              <span class="post-meta-divider">|</span>



              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-check-o"></i>
              </span>

                <span class="post-meta-item-text">更新于&#58;</span>

              <time title="更新于" itemprop="dateModified" datetime="2018-03-20T11:13:38+08:00">
                2018-03-20
              </time>

          </span>





              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/2017/12/29/vue-demo/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count disqus-comment-count"
                        data-disqus-identifier="2017/12/29/vue-demo/" itemprop="commentCount"></span>
                </a>
              </span>





             <span id="/2017/12/29/vue-demo/" class="leancloud_visitors" data-flag-title="vue小组件制造之路">
               <span class="post-meta-divider">|</span>
               <span class="post-meta-item-icon">
                 <i class="fa fa-eye"></i>
               </span>

                 <span class="post-meta-item-text">阅读次数&#58;</span>

                 <span class="leancloud-visitors-count"></span>
             </span>





            <div class="post-wordcount">


                <span class="post-meta-item-icon">
                  <i class="fa fa-file-word-o"></i>
                </span>

                  <span class="post-meta-item-text">字数统计&#58;</span>

                <span title="字数统计">
                  3,367
                </span>



                <span class="post-meta-divider">|</span>



                <span class="post-meta-item-icon">
                  <i class="fa fa-clock-o"></i>
                </span>

                  <span class="post-meta-item-text">阅读时长 &asymp;</span>

                <span title="阅读时长">
                  19
                </span>

            </div>




        </div>
      </header>





    <div class="post-body" itemprop="articleBody">





        <h2 id="用vue写了些项目-但一直没有提取常用的祖件-现在尝试抽象提取出一些"><a href="#用vue写了些项目-但一直没有提取常用的祖件-现在尝试抽象提取出一些" class="headerlink" title="用vue写了些项目,但一直没有提取常用的祖件,现在尝试抽象提取出一些"></a>用vue写了些项目,但一直没有提取常用的祖件,现在尝试抽象提取出一些</h2><a id="more"></a>
<h2 id="记录"><a href="#记录" class="headerlink" title="记录"></a>记录</h2><h3 id="npm-run-dev-执行后自动打开浏览器"><a href="#npm-run-dev-执行后自动打开浏览器" class="headerlink" title="npm run dev 执行后自动打开浏览器"></a>npm run dev 执行后自动打开浏览器</h3><p>Q: npm run dev 执行后自动打开浏览器<br>A: 因为默认设置为false,需要自己设置 <a href="https://doc.webpack-china.org/configuration/dev-server/" target="_blank" rel="noopener">文档</a><br>下列两种方案 :</p>
<ol>
<li><strong>package.json</strong><br>scripts中，在webpack-dev-server后加上 <code>- -open</code></li>
<li><strong>config\index.js</strong><br>找到 autoOpenBrowser ,将false修改为true</li>
</ol>
<h2 id="picker"><a href="#picker" class="headerlink" title="picker"></a>picker</h2><h3 id="仿制weui的picker"><a href="#仿制weui的picker" class="headerlink" title="仿制weui的picker"></a><a href="https://zhangyuhan2016.github.io/#/picker" target="_blank" rel="noopener">仿制weui的picker</a></h3><p><strong>通过外层盒子的touch事件改变内容的translate3d</strong><br>遇到的问题:</p>
<ul>
<li style="list-style: none"><input type="checkbox"> 移动端上下切换卡顿<h4 id="效果图"><a href="#效果图" class="headerlink" title="效果图"></a>效果图</h4><img src="/images/picker.gif" alt="picker"><h4 id="源码"><a href="#源码" class="headerlink" title="源码"></a>源码</h4></li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div class=&quot;ix&quot;&gt;</span><br><span class="line">    &#123;&#123;pageData&#125;&#125;</span><br><span class="line">    &lt;div class=&quot;picker-bg&quot; ref=&quot;bg&quot; @touchstart=&quot;pStart&quot; @touchmove=&quot;pMove&quot; @touchend=&quot;pEnd&quot;&gt;</span><br><span class="line">      &lt;div class=&quot;select-ac&quot;&gt;&lt;/div&gt;</span><br><span class="line">      &lt;div class=&quot;picker&quot; ref=&quot;test&quot;&gt;</span><br><span class="line">        &lt;div class=&quot;box&quot; ref=&quot;box&quot;&gt;</span><br><span class="line">          &lt;div v-for=&quot;(item,index) in picData.data&quot; :id=&quot;&apos;a&apos; + index&quot; :ref=&quot;&apos;a&apos; + index&quot; :key=&quot;index&quot;</span><br><span class="line">               @click=&quot;cIndex(index)&quot;&gt;&#123;&#123;item&#125;&#125;</span><br><span class="line">          &lt;/div&gt;</span><br><span class="line">        &lt;/div&gt;</span><br><span class="line">      &lt;/div&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line"></span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">  export default &#123;</span><br><span class="line">    name: &apos;picker&apos;,</span><br><span class="line">    data: function () &#123;</span><br><span class="line">      return &#123;</span><br><span class="line">        picData: &#123;</span><br><span class="line">          default: &apos;1&apos;,</span><br><span class="line">          data: [&apos;1&apos;, &apos;2&apos;, &apos;3&apos;, &apos;4&apos;, &apos;5&apos;, &apos;6&apos;, &apos;7&apos;, &apos;1&apos;, &apos;2&apos;, &apos;3&apos;, &apos;4&apos;, &apos;5&apos;, &apos;6&apos;, &apos;7&apos;]</span><br><span class="line">        &#125;,</span><br><span class="line">        pageData: &#123;</span><br><span class="line">          start: &apos;&apos;,</span><br><span class="line">          end: &apos;&apos;,</span><br><span class="line">          move: &apos;&apos;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    created: function () &#123;</span><br><span class="line">    &#125;, // 创建时</span><br><span class="line">    beforeMount: function () &#123;&#125;, // 挂载之前</span><br><span class="line">    mounted: function () &#123;&#125;, // 挂载之后</span><br><span class="line">    beforeUpdate: function () &#123;&#125;, // 数据更新时调用,在渲染之前</span><br><span class="line">    updated: function () &#123;&#125;, // 数据更新后,渲染后调用(禁止)</span><br><span class="line">    beforeDestroy: function () &#123;&#125;, // 实例销毁前调用,解绑中间层的数据传输</span><br><span class="line">    destroyed: function () &#123;&#125;, // 实例销毁后调用</span><br><span class="line">    methods: &#123;</span><br><span class="line">      cIndex (i) &#123;</span><br><span class="line">        console.log(&apos;--i--&apos;, i)</span><br><span class="line">      &#125;,</span><br><span class="line">      pMove (e) &#123;</span><br><span class="line">        // 获取当前位置</span><br><span class="line">        let newHeight = this.$refs.box.style.transform.split(&apos;px,&apos;)[1] || 0</span><br><span class="line">        // 获取上一次的位置</span><br><span class="line">        let oldHeight = this.pageData.start</span><br><span class="line">        // 计算活动距离</span><br><span class="line">        this.pageData.move = e.targetTouches[0].pageY</span><br><span class="line">        let tempHeight = e.targetTouches[0].pageY - this.pageData.start</span><br><span class="line">        let endHeight = Number(newHeight) + Number(tempHeight * 1.5)</span><br><span class="line">        console.log(&apos;--e--&apos;, newHeight, oldHeight, tempHeight, endHeight)</span><br><span class="line">        this.pageData.start = e.targetTouches[0].pageY</span><br><span class="line">        this.$refs.box.style.transform = `translate3d(0px, $&#123;endHeight&#125;px, 0px)`</span><br><span class="line">        e.preventDefault()</span><br><span class="line">      &#125;,</span><br><span class="line">      pEnd () &#123;</span><br><span class="line">        // 当前transform</span><br><span class="line">        let oldHeight = this.$refs.box.style.transform.split(&apos;px,&apos;)[1] || 0</span><br><span class="line">        this.pageData.end = oldHeight</span><br><span class="line">        // options 高度,数量</span><br><span class="line">        let tempHeight = document.querySelectorAll(&apos;.picker .box div&apos;)[0].offsetHeight</span><br><span class="line">        let tempNumber = document.querySelectorAll(&apos;.picker .box div&apos;).length - 1</span><br><span class="line">        let index = Math.round(oldHeight / tempHeight)</span><br><span class="line">        console.log(&apos;--end--&apos;, index, tempNumber, tempHeight, this.picData.data.length)</span><br><span class="line">        if (index &lt; -tempNumber) &#123;</span><br><span class="line">          index = -tempNumber</span><br><span class="line">        &#125;</span><br><span class="line">        if (index &gt; 0) &#123;</span><br><span class="line">          index = 0</span><br><span class="line">        &#125;</span><br><span class="line">        this.$refs.box.style.transform = `translate3d(0px, $&#123;index * 60&#125;px, 0px)`</span><br><span class="line">      &#125;,</span><br><span class="line">      pStart (e) &#123;</span><br><span class="line">        this.pageData.start = e.targetTouches[0].pageY</span><br><span class="line">        console.log(&apos;--start--&apos;, this.pageData.start)</span><br><span class="line">      &#125;</span><br><span class="line">    &#125; // 函数</span><br><span class="line">  &#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line">&lt;style lang=&apos;scss&apos;&gt;</span><br><span class="line"></span><br><span class="line">  .ix &#123;</span><br><span class="line">    position: fixed;</span><br><span class="line">    width: 100vw;</span><br><span class="line">    bottom: 0;</span><br><span class="line">    z-index: 5;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  $height: 60px;</span><br><span class="line">  .picker-bg &#123;</span><br><span class="line">    display: block;</span><br><span class="line">    position: relative;</span><br><span class="line">    height: 5 * $height;</span><br><span class="line">    overflow: hidden;</span><br><span class="line">    width: 100%;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  $acBg: rgba(86, 86, 86, 0.2);</span><br><span class="line">  $conBg: rgba(252, 252, 252, 0.70);</span><br><span class="line">  .select-ac &#123;</span><br><span class="line">    width: 100%;</span><br><span class="line">    height: $height;</span><br><span class="line">    user-select: none;</span><br><span class="line">    background-color: $acBg;</span><br><span class="line">    position: absolute;</span><br><span class="line">    left: 0;</span><br><span class="line">    z-index: 3;</span><br><span class="line">    top: 2 * $height;</span><br><span class="line">    pointer-events: none;</span><br><span class="line">    &amp;::after, &amp;::before &#123;</span><br><span class="line">      content: &quot;&quot;;</span><br><span class="line">      display: block;</span><br><span class="line">      position: absolute;</span><br><span class="line">      background-color: $conBg;</span><br><span class="line">      width: 100%;</span><br><span class="line">      height: 500%;</span><br><span class="line">      pointer-events: auto;</span><br><span class="line">    &#125;</span><br><span class="line">    &amp;::before &#123;</span><br><span class="line">      bottom: $height;</span><br><span class="line">    &#125;</span><br><span class="line">    &amp;::after &#123;</span><br><span class="line">      top: $height;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  .picker &#123;</span><br><span class="line">    box-sizing: border-box;</span><br><span class="line">    position: relative;</span><br><span class="line">    /*overflow-y: auto;*/</span><br><span class="line">    &amp;::-webkit-scrollbar &#123;</span><br><span class="line">      width: 0;</span><br><span class="line">    &#125;</span><br><span class="line">    .box &#123;</span><br><span class="line">      user-select: none;</span><br><span class="line">      transition: all 0.4s;</span><br><span class="line">      display: flex;</span><br><span class="line">      flex-direction: column;</span><br><span class="line">      justify-content: center;</span><br><span class="line">      padding-top: 2 * $height;</span><br><span class="line">      padding-bottom: 2 * $height;</span><br><span class="line">      div &#123;</span><br><span class="line">        user-select: none;</span><br><span class="line">        height: $height;</span><br><span class="line">        line-height: $height;</span><br><span class="line">        text-align: center;</span><br><span class="line">        font-size: 18px;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">  &#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>
<h3 id="滚动条版picker"><a href="#滚动条版picker" class="headerlink" title="滚动条版picker"></a>滚动条版picker</h3><p>通过外层盒子设定高度,通过滚动可以做到类似效果</p>
<h4 id="思路"><a href="#思路" class="headerlink" title="思路"></a>思路</h4><p>整体View分为数据层,高亮选中层,整体背景层<br>高亮选中层使用before&amp;after实现<br>通过css属性阻止非高亮区的点击事件冒泡<br>通过click获取当前高亮数据<br>监听滚动事件判断当前高亮的数据<br>缺点：<br>可能滚动到两个数据之间<br>(可以通过在滚动事件加入判断,让其滚动)</p>
<h4 id="代码"><a href="#代码" class="headerlink" title="代码"></a>代码</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br></pre></td><td class="code"><pre><span class="line">&lt;style lang=&apos;scss&apos;&gt;</span><br><span class="line">  $height: 60px;</span><br><span class="line">  .picker-bg &#123;</span><br><span class="line">    display: block;</span><br><span class="line">    position: relative;</span><br><span class="line">    height: 5 * $height;</span><br><span class="line">    overflow: hidden;</span><br><span class="line">    width: 100%;</span><br><span class="line">  &#125;</span><br><span class="line">  $acBg: rgba(86, 86, 86, 0.2);</span><br><span class="line">  $conBg: rgba(252, 252, 252, 0.70);</span><br><span class="line">  .select-ac &#123;</span><br><span class="line">    width: 100%;</span><br><span class="line">    height: $height;</span><br><span class="line">    background-color: $acBg;</span><br><span class="line">    position: absolute;</span><br><span class="line">    left: 0;</span><br><span class="line">    top: 2 * $height;</span><br><span class="line">    pointer-events: none;</span><br><span class="line">    &amp;::after, &amp;::before &#123;</span><br><span class="line">      content: &quot;&quot;;</span><br><span class="line">      display: block;</span><br><span class="line">      position: absolute;</span><br><span class="line">      background-color: $conBg;</span><br><span class="line">      width: 100%;</span><br><span class="line">      height: 500%;</span><br><span class="line">      pointer-events: auto;</span><br><span class="line">    &#125;</span><br><span class="line">    &amp;::before &#123;</span><br><span class="line">      bottom: $height;</span><br><span class="line">    &#125;</span><br><span class="line">    &amp;::after &#123;</span><br><span class="line">      top: $height;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  .picker &#123;</span><br><span class="line">    box-sizing: border-box;</span><br><span class="line">    height: 100%;</span><br><span class="line">    overflow-y: auto;</span><br><span class="line">    &amp;::-webkit-scrollbar&#123;</span><br><span class="line">      width: 0;</span><br><span class="line">    &#125;</span><br><span class="line">    .box &#123;</span><br><span class="line">      display: flex;</span><br><span class="line">      flex-direction: column;</span><br><span class="line">      justify-content: center;</span><br><span class="line">      padding-top: 2 * $height;</span><br><span class="line">      padding-bottom: 2 * $height;</span><br><span class="line">      div &#123;</span><br><span class="line">        height: $height;</span><br><span class="line">        line-height: $height;</span><br><span class="line">        text-align: center;</span><br><span class="line">        font-size: 18px;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">  &#125;</span><br><span class="line">&lt;/style&gt;</span><br><span class="line">&lt;div class=&quot;picker-bg&quot; &gt;</span><br><span class="line">  &lt;div class=&quot;select-ac&quot;&gt;&lt;/div&gt;</span><br><span class="line">  &lt;div class=&quot;picker&quot; ref=&quot;test&quot; @scroll=&quot;sIndex&quot;&gt;</span><br><span class="line">    &lt;div class=&quot;box&quot;&gt;</span><br><span class="line">      &lt;div v-for=&quot;(item,index) in picData.data&quot;  :key=&quot;index&quot; @click=&quot;cIndex(index)&quot;&gt;&#123;&#123;item&#125;&#125;&lt;/div&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">cIndex (i) &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'--点击选中的:--'</span>, i)</span><br><span class="line">&#125;</span><br><span class="line">sIndex () &#123;</span><br><span class="line">  <span class="keyword">let</span> tempHeight = <span class="built_in">document</span>.querySelectorAll(<span class="string">'.picker .box div'</span>)[<span class="number">0</span>].offsetHeight</span><br><span class="line">  <span class="keyword">let</span> index = <span class="built_in">Math</span>.round(<span class="keyword">this</span>.$refs.test.scrollTop / tempHeight)</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'--当前滚动位置选中的:--'</span>, index)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="验证码"><a href="#验证码" class="headerlink" title="验证码"></a>验证码</h2><h3 id="图中点字验证码"><a href="#图中点字验证码" class="headerlink" title="图中点字验证码"></a><a href="https://zhangyuhan2016.github.io/#/yzm" target="_blank" rel="noopener">图中点字验证码</a></h3><p>通过canvas绘制文字及背景,最终获取用户点击位置与文字位置匹配<br>遇到的问题:</p>
<ul>
<li style="list-style: none"><input type="checkbox" checked> 高分屏Canvas绘制文字及图片模糊</li>
<li style="list-style: none"><input type="checkbox"> 坐标对比匹配（文字存在重叠）<h4 id="效果图-1"><a href="#效果图-1" class="headerlink" title="效果图"></a>效果图</h4><img src="/images/vue-yzm.gif" alt="canvas-yzm"><h4 id="源码-1"><a href="#源码-1" class="headerlink" title="源码"></a>源码</h4></li>
</ul>
<p><strong>code.vue</strong><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br><span class="line">255</span><br><span class="line">256</span><br><span class="line">257</span><br><span class="line">258</span><br><span class="line">259</span><br><span class="line">260</span><br><span class="line">261</span><br><span class="line">262</span><br><span class="line">263</span><br><span class="line">264</span><br><span class="line">265</span><br><span class="line">266</span><br><span class="line">267</span><br><span class="line">268</span><br><span class="line">269</span><br><span class="line">270</span><br><span class="line">271</span><br><span class="line">272</span><br><span class="line">273</span><br><span class="line">274</span><br><span class="line">275</span><br><span class="line">276</span><br><span class="line">277</span><br><span class="line">278</span><br><span class="line">279</span><br><span class="line">280</span><br><span class="line">281</span><br><span class="line">282</span><br><span class="line">283</span><br><span class="line">284</span><br><span class="line">285</span><br><span class="line">286</span><br><span class="line">287</span><br><span class="line">288</span><br><span class="line">289</span><br><span class="line">290</span><br><span class="line">291</span><br><span class="line">292</span><br><span class="line">293</span><br><span class="line">294</span><br><span class="line">295</span><br><span class="line">296</span><br><span class="line">297</span><br><span class="line">298</span><br><span class="line">299</span><br><span class="line">300</span><br><span class="line">301</span><br><span class="line">302</span><br><span class="line">303</span><br><span class="line">304</span><br><span class="line">305</span><br><span class="line">306</span><br><span class="line">307</span><br><span class="line">308</span><br><span class="line">309</span><br><span class="line">310</span><br><span class="line">311</span><br><span class="line">312</span><br><span class="line">313</span><br><span class="line">314</span><br><span class="line">315</span><br><span class="line">316</span><br><span class="line">317</span><br><span class="line">318</span><br><span class="line">319</span><br><span class="line">320</span><br><span class="line">321</span><br><span class="line">322</span><br><span class="line">323</span><br><span class="line">324</span><br><span class="line">325</span><br><span class="line">326</span><br><span class="line">327</span><br><span class="line">328</span><br><span class="line">329</span><br><span class="line">330</span><br><span class="line">331</span><br><span class="line">332</span><br><span class="line">333</span><br><span class="line">334</span><br><span class="line">335</span><br><span class="line">336</span><br><span class="line">337</span><br><span class="line">338</span><br><span class="line">339</span><br><span class="line">340</span><br><span class="line">341</span><br><span class="line">342</span><br><span class="line">343</span><br><span class="line">344</span><br><span class="line">345</span><br><span class="line">346</span><br><span class="line">347</span><br><span class="line">348</span><br><span class="line">349</span><br><span class="line">350</span><br><span class="line">351</span><br><span class="line">352</span><br><span class="line">353</span><br><span class="line">354</span><br><span class="line">355</span><br><span class="line">356</span><br><span class="line">357</span><br><span class="line">358</span><br><span class="line">359</span><br><span class="line">360</span><br><span class="line">361</span><br><span class="line">362</span><br><span class="line">363</span><br><span class="line">364</span><br><span class="line">365</span><br><span class="line">366</span><br><span class="line">367</span><br><span class="line">368</span><br><span class="line">369</span><br><span class="line">370</span><br><span class="line">371</span><br><span class="line">372</span><br><span class="line">373</span><br><span class="line">374</span><br><span class="line">375</span><br><span class="line">376</span><br><span class="line">377</span><br><span class="line">378</span><br><span class="line">379</span><br><span class="line">380</span><br><span class="line">381</span><br><span class="line">382</span><br><span class="line">383</span><br><span class="line">384</span><br><span class="line">385</span><br><span class="line">386</span><br><span class="line">387</span><br><span class="line">388</span><br><span class="line">389</span><br><span class="line">390</span><br><span class="line">391</span><br><span class="line">392</span><br><span class="line">393</span><br><span class="line">394</span><br><span class="line">395</span><br><span class="line">396</span><br><span class="line">397</span><br><span class="line">398</span><br><span class="line">399</span><br><span class="line">400</span><br><span class="line">401</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div class=&quot;checkCode&quot; :class=&quot;&#123;success:checkData.cData.flag&#125;&quot;&gt;</span><br><span class="line">    &lt;span class=&quot;title&quot;&gt;&#123;&#123;checkData.title&#125;&#125;&lt;/span&gt;</span><br><span class="line">    &lt;div class=&quot;content&quot; @click=&quot;showCode&quot;&gt;</span><br><span class="line">      &lt;div class=&quot;anime&quot;&gt;</span><br><span class="line">        &lt;div class=&quot;one&quot;&gt;&lt;/div&gt;</span><br><span class="line">      &lt;/div&gt;</span><br><span class="line">      &lt;div v-show=&quot;!checkData.popShow &amp;&amp; !checkData.cData.flag&quot;&gt;&#123;&#123;checkData.text[0]&#125;&#125;&lt;/div&gt;</span><br><span class="line">      &lt;div v-show=&quot;checkData.popShow &amp;&amp; !checkData.cData.flag&quot;&gt;&#123;&#123;checkData.text[1]&#125;&#125;&lt;/div&gt;</span><br><span class="line">      &lt;div v-show=&quot;!checkData.popShow &amp;&amp; checkData.cData.flag&quot;&gt;&#123;&#123;checkData.text[2]&#125;&#125;&lt;/div&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">    &lt;div class=&quot;dialog-bg&quot; @click.self.stop=&quot;closeCode&quot; v-show=&quot;checkData.popShow&quot;&gt;&lt;/div&gt;</span><br><span class="line">    &lt;div class=&quot;dialog l-box&quot;  v-show=&quot;checkData.popShow &amp;&amp; !checkData.cData.flag&quot;&gt;</span><br><span class="line">      &lt;div class=&quot;title&quot;&gt;</span><br><span class="line">        &lt;span v-if=&quot;checkData.cData.tipStatus&quot;&gt;&#123;&#123;checkData.cData.tip[0]&#125;&#125;&lt;/span&gt;</span><br><span class="line">        &lt;span v-else class=&quot;warn&quot;&gt;&#123;&#123;checkData.cData.tip[1]&#125;&#125;&lt;/span&gt;</span><br><span class="line">        &lt;span class=&quot;card-bg&quot;&gt;&#123;&#123;checkData.cData.text&#125;&#125;&lt;/span&gt;</span><br><span class="line">      &lt;/div&gt;</span><br><span class="line">      &lt;div class=&quot;content&quot;&gt;</span><br><span class="line">        &lt;canvas id=&quot;yzm-canvas&quot; @click=&quot;addNumber&quot; :width=&quot;parseInt(checkData.cData.style.width) * 2 + &apos;px&apos; &quot;</span><br><span class="line">                :height=&quot;parseInt(checkData.cData.style.height) * 2 + &apos;px&apos; &quot; :style=&quot;checkData.cData.style&quot;&gt;&lt;/canvas&gt;</span><br><span class="line">        &lt;div v-for=&quot;(item,index) in checkData.cData.clickData&quot; class=&quot;number&quot; @click=&quot;removeNumber(index)&quot;</span><br><span class="line">             :data-index=&quot;index + 1&quot;</span><br><span class="line">             :key=&quot;index&quot; :style=&quot;&#123;left: item.x + &apos;px&apos;, top: item.y + 35 + &apos;px&apos;&#125;&quot;&gt;&lt;/div&gt;</span><br><span class="line">      &lt;/div&gt;</span><br><span class="line">      &lt;div class=&quot;footer&quot;&gt;</span><br><span class="line">        &lt;i class=&quot;iconfont icon-refresh tip&quot; data-tip=&quot;刷新验证码&quot; @click=&quot;reFont&quot;&gt;&lt;/i&gt;</span><br><span class="line">        &lt;button @click=&quot;checkCfData&quot;&gt;验证&lt;/button&gt;</span><br><span class="line">      &lt;/div&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">  import DrawCode from &apos;./drawCode&apos;</span><br><span class="line"></span><br><span class="line">  export default &#123;</span><br><span class="line">    name: &apos;checkCode&apos;,</span><br><span class="line">    data: function () &#123;</span><br><span class="line">      return &#123;</span><br><span class="line">        checkData: &#123;</span><br><span class="line">          title: &apos;验证码&apos;,</span><br><span class="line">          text: [&apos;点击进行验证&apos;, &apos;正在验证&apos;, &apos;验证成功&apos;],</span><br><span class="line">          popShow: false,</span><br><span class="line">          cData: &#123;</span><br><span class="line">            flag: false,</span><br><span class="line">            text: &apos;默认成语&apos;,</span><br><span class="line">            tipStatus: true,</span><br><span class="line">            tip: [&apos;请按顺序点击图中文字&apos;, &apos;验证错误,请重新验证&apos;],</span><br><span class="line">            style: &#123;</span><br><span class="line">              width: &apos;280px&apos;,</span><br><span class="line">              height: &apos;200px&apos;</span><br><span class="line">            &#125;,</span><br><span class="line">            clickData: [],</span><br><span class="line">            fontData: []</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    created: function () &#123;&#125;, // 创建时</span><br><span class="line">    beforeMount: function () &#123;&#125;, // 挂载之前</span><br><span class="line">    mounted: function () &#123;&#125;, // 挂载之后</span><br><span class="line">    beforeUpdate: function () &#123;&#125;, // 数据更新时调用,在渲染之前</span><br><span class="line">    updated: function () &#123;&#125;, // 数据更新后,渲染后调用(禁止)</span><br><span class="line">    beforeDestroy: function () &#123;&#125;, // 实例销毁前调用,解绑中间层的数据传输</span><br><span class="line">    destroyed: function () &#123;&#125;, // 实例销毁后调用</span><br><span class="line">    methods: &#123;</span><br><span class="line">      showCode () &#123;</span><br><span class="line">        if (this.checkData.cData.flag) &#123; return false &#125;</span><br><span class="line">        this.checkData.popShow = true</span><br><span class="line">        return this.reFont()</span><br><span class="line">      &#125;,</span><br><span class="line">      closeCode () &#123;</span><br><span class="line">        this.checkData.popShow = false</span><br><span class="line">      &#125;,</span><br><span class="line">      addNumber (e) &#123;</span><br><span class="line">        this.checkData.cData.tipStatus = true</span><br><span class="line">        if (this.checkData.cData.clickData.length &gt;= 4) &#123;</span><br><span class="line">          return false</span><br><span class="line">        &#125;</span><br><span class="line">        let x = e.offsetX</span><br><span class="line">        let y = e.offsetY</span><br><span class="line">        this.checkData.cData.clickData.push(&#123;x, y&#125;)</span><br><span class="line">        if (this.checkData.cData.clickData.length === 4) &#123;</span><br><span class="line">          return this.checkCfData()</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      removeNumber (i) &#123;</span><br><span class="line">        this.checkData.cData.clickData.splice(i)</span><br><span class="line">      &#125;,</span><br><span class="line">      drawFont (data) &#123;</span><br><span class="line">        let temp = new DrawCode(data)</span><br><span class="line">        temp.start()</span><br><span class="line">        this.checkData.cData.fontData = temp.fontData</span><br><span class="line">        this.checkData.cData.scope = temp.scope</span><br><span class="line">        this.checkData.cData.text = temp.text.join(&apos;&apos;)</span><br><span class="line">      &#125;,</span><br><span class="line">      reFont (flag) &#123;</span><br><span class="line">        let tempStr = [[&apos;狡兔三窟&apos;, &apos;免库&apos;], [&apos;长袖善舞&apos;, &apos;柚&apos;], [&apos;匪夷所思&apos;, &apos;篚&apos;], [&apos;飞扬跋扈&apos;, &apos;杨拔&apos;], [&apos;多事之秋&apos;, &apos;是又&apos;]]</span><br><span class="line">        this.checkData.cData.clickData = []</span><br><span class="line">        this.checkData.cData.flag = false</span><br><span class="line">        if (flag !== true) &#123;</span><br><span class="line">          this.checkData.cData.tipStatus = true</span><br><span class="line">        &#125; else &#123;</span><br><span class="line">          this.checkData.cData.tipStatus = false</span><br><span class="line">        &#125;</span><br><span class="line">        this.drawFont(&#123;</span><br><span class="line">          text: tempStr[parseInt(Math.random() * tempStr.length)]</span><br><span class="line">        &#125;)</span><br><span class="line">      &#125;,</span><br><span class="line">      checkCfData () &#123;</span><br><span class="line">        if (this.checkData.cData.clickData.length !== 4) &#123;</span><br><span class="line">          this.checkData.cData.flag = false</span><br><span class="line">          return false</span><br><span class="line">        &#125;</span><br><span class="line">        let flag = this.checkData.cData.fontData.map((v) =&gt; &#123; return &#123;x: v.x / 2, y: v.y / 2&#125; &#125;).every((value, index) =&gt; &#123;</span><br><span class="line">          let booleanX = value.x &lt;= this.checkData.cData.clickData[index].x &amp;&amp; this.checkData.cData.clickData[index].x &lt;= (parseInt(value.x) + this.checkData.cData.scope / 2)</span><br><span class="line">          let booleanY = value.y &lt;= this.checkData.cData.clickData[index].y &amp;&amp; this.checkData.cData.clickData[index].y &lt;= (parseInt(value.y) + this.checkData.cData.scope / 2)</span><br><span class="line">          return booleanX || booleanY</span><br><span class="line">        &#125;)</span><br><span class="line">        this.checkData.cData.flag = flag</span><br><span class="line">        if (flag) &#123;</span><br><span class="line">          this.checkData.popShow = false</span><br><span class="line">        &#125; else &#123;</span><br><span class="line">          this.checkData.cData.tipStatus = false</span><br><span class="line">          return this.reFont(true)</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125; // 函数</span><br><span class="line">  &#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line">&lt;style lang=&apos;scss&apos; scoped&gt;</span><br><span class="line">  /* click-box */</span><br><span class="line">  .yzm-img&#123;</span><br><span class="line">    .bg&#123;&#125;</span><br><span class="line">    .card&#123;</span><br><span class="line">      width: 50px;</span><br><span class="line">      height: 50px;</span><br><span class="line">      background-color: gold;</span><br><span class="line">      position: relative;</span><br><span class="line">      &amp;::before&#123;</span><br><span class="line">        content: &quot;&quot;;</span><br><span class="line">        display: block;</span><br><span class="line">        left: 50%;</span><br><span class="line">        width: 20px;</span><br><span class="line">        height: 20px;</span><br><span class="line">        border-radius: 50% 50% 0 0;</span><br><span class="line">        background-color: black;</span><br><span class="line">        top: -10px;</span><br><span class="line">        margin-left: -10px;</span><br><span class="line">        position: absolute;</span><br><span class="line">      &#125;</span><br><span class="line">      &amp;::after&#123;</span><br><span class="line">        content: &quot;&quot;;</span><br><span class="line">        display: block;</span><br><span class="line">        left: 50%;</span><br><span class="line">        width: 20px;</span><br><span class="line">        height: 20px;</span><br><span class="line">        border-radius: 50%;</span><br><span class="line">        position: absolute;</span><br><span class="line">        background-color: red;</span><br><span class="line">        bottom: -10px;</span><br><span class="line">        margin-left: -10px;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  .checkCode &#123;</span><br><span class="line">    /* 基本参数设置 */</span><br><span class="line">    $success-color: #42DD18; // 成功色调</span><br><span class="line">    $height: 50px; // click-box 最小高度</span><br><span class="line">    $gap: 15px; // click-box 间距</span><br><span class="line">    /* 验证成功 */</span><br><span class="line">    &amp;.success &#123;</span><br><span class="line">      &gt; .content &#123;</span><br><span class="line">        border: 1px solid $success-color;</span><br><span class="line">        color: $success-color;</span><br><span class="line">        pointer-events: none;</span><br><span class="line">        .anime .one::before &#123;</span><br><span class="line">          background-color: $success-color;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    /* 禁止复制 */</span><br><span class="line">    * &#123;</span><br><span class="line">      user-select: none;</span><br><span class="line">    &#125;</span><br><span class="line">    width: 100%;</span><br><span class="line">    box-sizing: border-box;</span><br><span class="line">    display: flex;</span><br><span class="line">    flex-direction: row;</span><br><span class="line">    align-items: center;</span><br><span class="line">    min-height: $height;</span><br><span class="line">    margin: #&#123;$gap * 0.5&#125; 0;</span><br><span class="line">    position: relative;</span><br><span class="line">    &gt; .title &#123;</span><br><span class="line">      padding: 0 $gap;</span><br><span class="line">    &#125;</span><br><span class="line">    &gt; .content &#123;</span><br><span class="line">      max-width: 200px;</span><br><span class="line">      border: 1px solid #e7e7e7;</span><br><span class="line">      flex: 1;</span><br><span class="line">      height: $height;</span><br><span class="line">      margin-right: $gap;</span><br><span class="line">      display: flex;</span><br><span class="line">      flex-direction: row;</span><br><span class="line">      align-items: center;</span><br><span class="line">      .anime &#123;</span><br><span class="line">        min-width: $height;</span><br><span class="line">        margin-left: $gap;</span><br><span class="line">        $w: 12px;</span><br><span class="line">        .one &#123;</span><br><span class="line">          display: block;</span><br><span class="line">          width: $w * 3;</span><br><span class="line">          height: $w * 3;</span><br><span class="line">          border-radius: 50%;</span><br><span class="line">          background-color: #DEE9FA;</span><br><span class="line">          position: relative;</span><br><span class="line">          animation: zoomIn 1.2s infinite alternate ease-in;</span><br><span class="line">          transition: all 1.2s;</span><br><span class="line">          @keyframes zoomIn &#123;</span><br><span class="line">            to &#123;</span><br><span class="line">              transform: scale(0.6);</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">          @keyframes zoomOut &#123;</span><br><span class="line">            to &#123;</span><br><span class="line">              transform: scale(1.5);</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">          &amp;::before &#123;</span><br><span class="line">            content: &quot;&quot;;</span><br><span class="line">            display: block;</span><br><span class="line">            position: absolute;</span><br><span class="line">            width: $w;</span><br><span class="line">            height: $w;</span><br><span class="line">            border-radius: 50%;</span><br><span class="line">            background-color: #5D91F4;</span><br><span class="line">            left: $w;</span><br><span class="line">            top: $w;</span><br><span class="line">            animation: zoomOut 2.4s infinite alternate 1s ease-in;</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    .dialog-bg &#123;</span><br><span class="line">      position: fixed;</span><br><span class="line">      left: 0;</span><br><span class="line">      top: 0;</span><br><span class="line">      height: 100vh;</span><br><span class="line">      width: 100vw;</span><br><span class="line">      z-index: 4;</span><br><span class="line">    &#125;</span><br><span class="line">    .dialog &#123;</span><br><span class="line">      $dW: 320px;</span><br><span class="line">      $dH: 200px;</span><br><span class="line">      min-width: $dW;</span><br><span class="line">      min-height: $dH;</span><br><span class="line">      position: absolute;</span><br><span class="line">      border: 1px solid #e6e6e6;</span><br><span class="line">      background-color: white;</span><br><span class="line">      z-index: 5;</span><br><span class="line">      top: $height;</span><br><span class="line">      margin-left: $height * 2.9;</span><br><span class="line">      margin-top: -#&#123;$height * 0.7&#125;;</span><br><span class="line">      $width: 8px;</span><br><span class="line">      &amp;::before &#123;</span><br><span class="line">        content: &quot;&quot;;</span><br><span class="line">        height: 0px;</span><br><span class="line">        width: 0px;</span><br><span class="line">        position: absolute;</span><br><span class="line">        left: -17px;</span><br><span class="line">        top: 5px;</span><br><span class="line">        z-index: 0;</span><br><span class="line">        border-left: $width solid transparent;</span><br><span class="line">        border-top: $width solid transparent;</span><br><span class="line">        border-bottom: $width solid transparent;</span><br><span class="line">        border-right: $width solid rgba(63, 63, 63, 0.1);</span><br><span class="line">      &#125;</span><br><span class="line">      &amp;::after &#123;</span><br><span class="line">        content: &quot;&quot;;</span><br><span class="line">        height: 0px;</span><br><span class="line">        width: 0px;</span><br><span class="line">        position: absolute;</span><br><span class="line">        left: -14px;</span><br><span class="line">        top: 5px;</span><br><span class="line">        z-index: 1;</span><br><span class="line">        border-left: $width solid transparent;</span><br><span class="line">        border-top: $width solid transparent;</span><br><span class="line">        border-bottom: $width solid transparent;</span><br><span class="line">        border-right: $width solid white;</span><br><span class="line">      &#125;</span><br><span class="line">      @media screen and (max-width: 480px) &#123;</span><br><span class="line">        &amp; &#123;</span><br><span class="line">          left: calc(50% - 160px);</span><br><span class="line">          margin: 0;</span><br><span class="line">          top: 70px;</span><br><span class="line">          &amp;::before &#123;</span><br><span class="line">            left: auto;</span><br><span class="line">            top: -17px;</span><br><span class="line">            transform: rotateZ(90deg);</span><br><span class="line">          &#125;</span><br><span class="line">          &amp;::after &#123;</span><br><span class="line">            left: auto;</span><br><span class="line">            top: -15px;</span><br><span class="line">            transform: rotateZ(90deg);</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    .l-box &#123;</span><br><span class="line">      display: flex;</span><br><span class="line">      flex-direction: column;</span><br><span class="line">      justify-content: center;</span><br><span class="line">      align-items: center;</span><br><span class="line">      canvas &#123;</span><br><span class="line">        border: 1px solid #e6e6e6;</span><br><span class="line">      &#125;</span><br><span class="line">      .warn &#123;</span><br><span class="line">        color: #ff8a00;</span><br><span class="line">      &#125;</span><br><span class="line">      .title &#123;</span><br><span class="line">        height: 50px;</span><br><span class="line">        line-height: 50px;</span><br><span class="line">        display: flex;</span><br><span class="line">        flex-direction: row;</span><br><span class="line">        align-items: center;</span><br><span class="line">        .card-bg &#123;</span><br><span class="line">          border: 1px solid #e6e6e6;</span><br><span class="line">          box-sizing: border-box;</span><br><span class="line">          height: 30px;</span><br><span class="line">          line-height: 30px;</span><br><span class="line">          background-color: deepskyblue;</span><br><span class="line">          color: white;</span><br><span class="line">          font-weight: bold;</span><br><span class="line">          margin: 0 10px;</span><br><span class="line">          padding: 0 10px;</span><br><span class="line">          letter-spacing: 4px;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">      .content &#123;</span><br><span class="line"></span><br><span class="line">      &#125;</span><br><span class="line">      .footer &#123;</span><br><span class="line">        margin: 5px 0;</span><br><span class="line">        width: 100%;</span><br><span class="line">        height: 40px;</span><br><span class="line">        display: flex;</span><br><span class="line">        flex-direction: row;</span><br><span class="line">        align-items: center;</span><br><span class="line">        justify-content: space-around;</span><br><span class="line">        i &#123;</span><br><span class="line">          font-size: 30px;</span><br><span class="line">          color: #b3b3b3;</span><br><span class="line">        &#125;</span><br><span class="line">        button &#123;</span><br><span class="line">          height: 40px;</span><br><span class="line">          width: 100px;</span><br><span class="line">          color: white;</span><br><span class="line">          background-color: deepskyblue;</span><br><span class="line">          border: 0;</span><br><span class="line">          font-size: 18px;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    .tip &#123;</span><br><span class="line">      position: relative;</span><br><span class="line">      &amp;:hover &#123;</span><br><span class="line">        &amp;::after &#123;</span><br><span class="line">          content: attr(data-tip);</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">      &amp;::after &#123;</span><br><span class="line">        $w: 50px;</span><br><span class="line">        display: block;</span><br><span class="line">        position: absolute;</span><br><span class="line">        font-size: 16px;</span><br><span class="line">        min-width: $w;</span><br><span class="line">        background: white;</span><br><span class="line">        border: 1px solid #e6e6e6;</span><br><span class="line">        margin-top: - #&#123;$w + 10px&#125;;</span><br><span class="line">        margin-left: - #&#123;$w / 2&#125;;</span><br><span class="line">        white-space: nowrap;</span><br><span class="line">        padding: 3px;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    .number &#123;</span><br><span class="line">      width: 30px;</span><br><span class="line">      height: 30px;</span><br><span class="line">      border-radius: 50%;</span><br><span class="line">      color: white;</span><br><span class="line">      text-align: center;</span><br><span class="line">      line-height: 30px;</span><br><span class="line">      position: absolute;</span><br><span class="line">      background: #007cff;</span><br><span class="line">      box-shadow: 0 0 2px 1px white;</span><br><span class="line">      &amp;::before &#123;</span><br><span class="line">        content: attr(data-index);</span><br><span class="line">        font-size: 20px;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure></p>
<p><strong>DrawCode.js</strong><br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 1. 准备画布背景</span></span><br><span class="line"><span class="comment"> *  0. 清空画布</span></span><br><span class="line"><span class="comment"> *  1. 获取画布大小</span></span><br><span class="line"><span class="comment"> *  2. 获取背景</span></span><br><span class="line"><span class="comment"> * 2. 绘制文字(坐标,css,文字)</span></span><br><span class="line"><span class="comment"> *  0. 获取文字</span></span><br><span class="line"><span class="comment"> *  1. 获取css</span></span><br><span class="line"><span class="comment"> *  2. 获取坐标</span></span><br><span class="line"><span class="comment"> *  3. 绘制</span></span><br><span class="line"><span class="comment"> *  4. 绘制干扰字符</span></span><br><span class="line"><span class="comment"> *  -------</span></span><br><span class="line"><span class="comment"> * 3. 判断用户操作</span></span><br><span class="line"><span class="comment"> *  0. 判断点击数量</span></span><br><span class="line"><span class="comment"> *  1. 判断点击位置</span></span><br><span class="line"><span class="comment"> * 4. 用户操作</span></span><br><span class="line"><span class="comment"> *  0. 添加标识</span></span><br><span class="line"><span class="comment"> *  1. 刷新验证码</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> *  防止坐标重复的方法</span></span><br><span class="line"><span class="comment"> *    0. 先提取一个有所有坐标的数组 (X)</span></span><br><span class="line"><span class="comment"> *    1. 随机,迭代与抽取出的坐标比较 (*)</span></span><br><span class="line"><span class="comment"> **/</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">DrawCode</span> </span>&#123;</span><br><span class="line">  <span class="keyword">constructor</span> (&#123;</span><br><span class="line">                 selector = <span class="string">'yzm-canvas'</span>,</span><br><span class="line">                 imgURL = <span class="built_in">require</span>(<span class="string">'@/assets/yzm/17.jpg'</span>),</span><br><span class="line">                 text = [<span class="string">'负荆请罪'</span>, <span class="string">'清醉'</span>],</span><br><span class="line">                 prob = <span class="string">'0.85'</span>,</span><br><span class="line">                 scope = <span class="string">'72'</span>,</span><br><span class="line">                 style = &#123;</span><br><span class="line">                   width: <span class="string">'280px'</span>,</span><br><span class="line">                   height: <span class="string">'200px'</span>,</span><br><span class="line">                   font: <span class="string">'oblique small-caps bold 72px Arial'</span>,</span><br><span class="line">                   color: <span class="string">'white'</span></span><br><span class="line">                 &#125;</span><br><span class="line">               &#125; = &#123;&#125;) &#123;</span><br><span class="line">    <span class="keyword">this</span>.ctx = <span class="built_in">document</span>.getElementById(selector).getContext(<span class="string">'2d'</span>)</span><br><span class="line">    <span class="keyword">this</span>.imgURL = imgURL</span><br><span class="line">    <span class="keyword">this</span>.text = [...text[<span class="number">0</span>]]</span><br><span class="line">    <span class="keyword">this</span>.mix = [...text[<span class="number">1</span>]]</span><br><span class="line">    <span class="keyword">this</span>.prob = prob</span><br><span class="line">    <span class="keyword">this</span>.width = <span class="built_in">parseInt</span>(style.width) * <span class="number">2</span></span><br><span class="line">    <span class="keyword">this</span>.height = <span class="built_in">parseInt</span>(style.height) * <span class="number">2</span></span><br><span class="line">    <span class="keyword">this</span>.font = style.font</span><br><span class="line">    <span class="keyword">this</span>.color = style.color</span><br><span class="line">    <span class="keyword">this</span>.fontData = []</span><br><span class="line">    <span class="keyword">this</span>.scope = <span class="built_in">parseInt</span>(scope)</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  getRanXY () &#123;</span><br><span class="line">    <span class="keyword">let</span> x = <span class="built_in">parseInt</span>(<span class="built_in">Math</span>.random() * (<span class="keyword">this</span>.width - <span class="keyword">this</span>.scope))</span><br><span class="line">    <span class="keyword">let</span> y = <span class="built_in">parseInt</span>(<span class="built_in">Math</span>.random() * (<span class="keyword">this</span>.height - <span class="keyword">this</span>.scope))</span><br><span class="line">    <span class="keyword">let</span> flag = <span class="keyword">this</span>.fontData.some(<span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">let</span> booleanX = value.x &lt;= x &amp;&amp; x &lt;= (<span class="built_in">parseInt</span>(value.x) + <span class="keyword">this</span>.scope)</span><br><span class="line">      <span class="keyword">let</span> booleanY = value.y &lt;= y &amp;&amp; y &lt;= (<span class="built_in">parseInt</span>(value.y) + <span class="keyword">this</span>.scope)</span><br><span class="line">      <span class="keyword">return</span> booleanX || booleanY</span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="keyword">if</span> (flag) &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="keyword">this</span>.getRanXY()</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      <span class="keyword">return</span> &#123;x, y&#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  start () &#123;</span><br><span class="line">    <span class="keyword">let</span> img = <span class="keyword">new</span> Image()</span><br><span class="line">    img.onload = <span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">this</span>.ctx.drawImage(img, <span class="number">0</span>, <span class="number">0</span>, <span class="keyword">this</span>.width, <span class="keyword">this</span>.height)</span><br><span class="line">      <span class="keyword">this</span>.ctx.font = <span class="keyword">this</span>.font</span><br><span class="line">      <span class="keyword">this</span>.ctx.fillStyle = <span class="keyword">this</span>.color</span><br><span class="line">      <span class="keyword">this</span>.ctx.textAlign = <span class="string">'start'</span></span><br><span class="line">      <span class="keyword">this</span>.ctx.textBaseline = <span class="string">'top'</span></span><br><span class="line">      <span class="keyword">for</span> (<span class="keyword">let</span> i <span class="keyword">in</span> <span class="keyword">this</span>.text) &#123;</span><br><span class="line">        <span class="keyword">let</span> tempXY = <span class="keyword">this</span>.getRanXY()</span><br><span class="line">        <span class="keyword">this</span>.ctx.fillText(<span class="keyword">this</span>.text[i], tempXY.x, tempXY.y)</span><br><span class="line">        <span class="keyword">this</span>.fontData.push(tempXY)</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="keyword">if</span> (<span class="built_in">Math</span>.random() &gt; <span class="keyword">this</span>.prob) &#123;</span><br><span class="line">        <span class="keyword">let</span> tempXY = <span class="keyword">this</span>.getRanXY()</span><br><span class="line">        <span class="keyword">this</span>.ctx.fillText(<span class="keyword">this</span>.mix[<span class="built_in">parseInt</span>(<span class="built_in">Math</span>.random() * <span class="keyword">this</span>.mix.length)], tempXY.x, tempXY.y)</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    img.src = <span class="keyword">this</span>.imgURL</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> DrawCode</span><br></pre></td></tr></table></figure></p>


    </div>







      <div>
        <div style="padding: 10px 0; margin: 20px auto; width: 90%; text-align: center;">
  <div></div>
  <button id="rewardButton" disable="enable" onclick="var qr = document.getElementById('QR'); if (qr.style.display === 'none') {qr.style.display='block';} else {qr.style.display='none'}">
    <span>打赏</span>
  </button>
  <div id="QR" style="display: none;">




      <div id="alipay" style="display: inline-block">
        <img id="alipay_qr" src="/images/zfb.png" alt="zhangyuhan2016 支付宝"/>
        <p>支付宝</p>
      </div>




  </div>
</div>

      </div>




    <footer class="post-footer">

        <div class="post-tags">

            <a href="/tags/vue/" rel="tag">vue</a>

            <a href="/tags/webpack/" rel="tag">webpack</a>

        </div>







        <div class="post-nav">
          <div class="post-nav-next post-nav-item">

              <a href="/2017/12/15/vue-deploy/" rel="next" title="搭建vue开发脚手架">
                <i class="fa fa-chevron-left"></i> 搭建vue开发脚手架
              </a>

          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">

              <a href="/2018/01/02/chrome-extension/" rel="prev" title="chrome扩展开发">
                chrome扩展开发 <i class="fa fa-chevron-right"></i>
              </a>

          </div>
        </div>




    </footer>
  </div>



  </article>



    <div class="post-spread">

    </div>
  </div>


          </div>






    <div class="comments" id="comments">
      <div id="disqus_thread">
        <noscript>
          Please enable JavaScript to view the
          <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a>
        </noscript>
      </div>
    </div>





        </div>



  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">

    <div class="sidebar-inner">




        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            站点概览
          </li>
        </ul>


      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">

              <img class="site-author-image" itemprop="image"
                src="https://avatars3.githubusercontent.com/u/18086072?s=460&v=4"
                alt="zhangyuhan2016" />

              <p class="site-author-name" itemprop="name">zhangyuhan2016</p>
              <p class="site-description motion-element" itemprop="description"></p>
          </div>

          <nav class="site-state motion-element">


              <div class="site-state-item site-state-posts">

                <a href="/archives/">

                  <span class="site-state-item-count">15</span>
                  <span class="site-state-item-name">日志</span>
                </a>
              </div>







              <div class="site-state-item site-state-tags">
                <a href="/tags/index.html">
                  <span class="site-state-item-count">30</span>
                  <span class="site-state-item-name">标签</span>
                </a>
              </div>


          </nav>



          <div class="links-of-author motion-element">


                <span class="links-of-author-item">
                  <a href="https://github.com/zhangyuhan2016" target="_blank" title="GitHub">

                      <i class="fa fa-fw fa-github"></i>GitHub</a>
                </span>


          </div>








        </div>
      </section>


      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">






              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#用vue写了些项目-但一直没有提取常用的祖件-现在尝试抽象提取出一些"><span class="nav-number">1.</span> <span class="nav-text"><a href="#&#x7528;vue&#x5199;&#x4E86;&#x4E9B;&#x9879;&#x76EE;-&#x4F46;&#x4E00;&#x76F4;&#x6CA1;&#x6709;&#x63D0;&#x53D6;&#x5E38;&#x7528;&#x7684;&#x7956;&#x4EF6;-&#x73B0;&#x5728;&#x5C1D;&#x8BD5;&#x62BD;&#x8C61;&#x63D0;&#x53D6;&#x51FA;&#x4E00;&#x4E9B;" class="headerlink" title="&#x7528;vue&#x5199;&#x4E86;&#x4E9B;&#x9879;&#x76EE;,&#x4F46;&#x4E00;&#x76F4;&#x6CA1;&#x6709;&#x63D0;&#x53D6;&#x5E38;&#x7528;&#x7684;&#x7956;&#x4EF6;,&#x73B0;&#x5728;&#x5C1D;&#x8BD5;&#x62BD;&#x8C61;&#x63D0;&#x53D6;&#x51FA;&#x4E00;&#x4E9B;"></a>&#x7528;vue&#x5199;&#x4E86;&#x4E9B;&#x9879;&#x76EE;,&#x4F46;&#x4E00;&#x76F4;&#x6CA1;&#x6709;&#x63D0;&#x53D6;&#x5E38;&#x7528;&#x7684;&#x7956;&#x4EF6;,&#x73B0;&#x5728;&#x5C1D;&#x8BD5;&#x62BD;&#x8C61;&#x63D0;&#x53D6;&#x51FA;&#x4E00;&#x4E9B;</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#记录"><span class="nav-number">2.</span> <span class="nav-text"><a href="#&#x8BB0;&#x5F55;" class="headerlink" title="&#x8BB0;&#x5F55;"></a>&#x8BB0;&#x5F55;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#npm-run-dev-执行后自动打开浏览器"><span class="nav-number">2.1.</span> <span class="nav-text"><a href="#npm-run-dev-&#x6267;&#x884C;&#x540E;&#x81EA;&#x52A8;&#x6253;&#x5F00;&#x6D4F;&#x89C8;&#x5668;" class="headerlink" title="npm run dev &#x6267;&#x884C;&#x540E;&#x81EA;&#x52A8;&#x6253;&#x5F00;&#x6D4F;&#x89C8;&#x5668;"></a>npm run dev &#x6267;&#x884C;&#x540E;&#x81EA;&#x52A8;&#x6253;&#x5F00;&#x6D4F;&#x89C8;&#x5668;</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#picker"><span class="nav-number">3.</span> <span class="nav-text"><a href="#picker" class="headerlink" title="picker"></a>picker</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#仿制weui的picker"><span class="nav-number">3.1.</span> <span class="nav-text"><a href="#&#x4EFF;&#x5236;weui&#x7684;picker" class="headerlink" title="&#x4EFF;&#x5236;weui&#x7684;picker"></a><a href="https://zhangyuhan2016.github.io/#/picker" target="_blank" rel="noopener">&#x4EFF;&#x5236;weui&#x7684;picker</a></span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#效果图"><span class="nav-number">3.1.1.</span> <span class="nav-text"><a href="#&#x6548;&#x679C;&#x56FE;" class="headerlink" title="&#x6548;&#x679C;&#x56FE;"></a>&#x6548;&#x679C;&#x56FE;</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#源码"><span class="nav-number">3.1.2.</span> <span class="nav-text"><a href="#&#x6E90;&#x7801;" class="headerlink" title="&#x6E90;&#x7801;"></a>&#x6E90;&#x7801;</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#滚动条版picker"><span class="nav-number">3.2.</span> <span class="nav-text"><a href="#&#x6EDA;&#x52A8;&#x6761;&#x7248;picker" class="headerlink" title="&#x6EDA;&#x52A8;&#x6761;&#x7248;picker"></a>&#x6EDA;&#x52A8;&#x6761;&#x7248;picker</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#思路"><span class="nav-number">3.2.1.</span> <span class="nav-text"><a href="#&#x601D;&#x8DEF;" class="headerlink" title="&#x601D;&#x8DEF;"></a>&#x601D;&#x8DEF;</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#代码"><span class="nav-number">3.2.2.</span> <span class="nav-text"><a href="#&#x4EE3;&#x7801;" class="headerlink" title="&#x4EE3;&#x7801;"></a>&#x4EE3;&#x7801;</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#验证码"><span class="nav-number">4.</span> <span class="nav-text"><a href="#&#x9A8C;&#x8BC1;&#x7801;" class="headerlink" title="&#x9A8C;&#x8BC1;&#x7801;"></a>&#x9A8C;&#x8BC1;&#x7801;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#图中点字验证码"><span class="nav-number">4.1.</span> <span class="nav-text"><a href="#&#x56FE;&#x4E2D;&#x70B9;&#x5B57;&#x9A8C;&#x8BC1;&#x7801;" class="headerlink" title="&#x56FE;&#x4E2D;&#x70B9;&#x5B57;&#x9A8C;&#x8BC1;&#x7801;"></a><a href="https://zhangyuhan2016.github.io/#/yzm" target="_blank" rel="noopener">&#x56FE;&#x4E2D;&#x70B9;&#x5B57;&#x9A8C;&#x8BC1;&#x7801;</a></span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#效果图-1"><span class="nav-number">4.1.1.</span> <span class="nav-text"><a href="#&#x6548;&#x679C;&#x56FE;-1" class="headerlink" title="&#x6548;&#x679C;&#x56FE;"></a>&#x6548;&#x679C;&#x56FE;</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#源码-1"><span class="nav-number">4.1.2.</span> <span class="nav-text"><a href="#&#x6E90;&#x7801;-1" class="headerlink" title="&#x6E90;&#x7801;"></a>&#x6E90;&#x7801;</span></a></li></ol></li></ol></li></ol></div>


          </div>
        </section>
      <!--/noindex-->




    </div>
    <div class="post-block page my-thanks">
        <div class="my-title">致谢</div>
        <div class="thanks">Hexo</div>
        <div class="thanks">Next & Gemini</div>
        <div class="thanks">Gitee</div>
    </div>
  </aside>



      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">









      </div>
    </footer>


      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>

      </div>




  </div>



<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>



























    <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>




    <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>




    <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>




    <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>




    <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>




    <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>




    <script type="text/javascript" src="/lib/three/three.min.js"></script>




    <script type="text/javascript" src="/lib/three/canvas_lines.min.js"></script>






  <script type="text/javascript" src="/js/src/utils.js?v=5.1.3"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.3"></script>







  <script type="text/javascript" src="/js/src/affix.js?v=5.1.3"></script>

  <script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.1.3"></script>




  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.3"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.3"></script>






  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.3"></script>









      <script id="dsq-count-scr" src="https://.disqus.com/count.js" async></script>



      <script type="text/javascript">
        var disqus_config = function () {
          this.page.url = 'https://zhangyuhan2016.gitee.io/2017/12/29/vue-demo/';
          this.page.identifier = '2017/12/29/vue-demo/';
          this.page.title = 'vue小组件制造之路';
        };
        var d = document, s = d.createElement('script');
        s.src = 'https://.disqus.com/embed.js';
        s.setAttribute('data-timestamp', '' + +new Date());
        (d.head || d.body).appendChild(s);
      </script>






























  <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
  <script src="//unpkg.com/valine/dist/Valine.min.js"></script>

  <script type="text/javascript">
    var GUEST = ['nick','mail','link'];
    var guest = 'nick,mail,link';
    guest = guest.split(',').filter(item=>{
      return GUEST.indexOf(item)>-1;
    });
    new Valine({
        el: '#comments' ,
        verify: true,
        notify: false,
        appId: 'xxTmc7jwpAd2bWhmkKOI7IGY-gzGzoHsz',
        appKey: 'glPUiD8ljbJsKYhBg5E0ghII',
        placeholder: '说点什么呗 ヾﾉ≧∀≦)o',
        avatar:'mm',
        guest_info:guest,
        pageSize:'10' || 10,
    });
  </script>












  <script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.4.js"></script>
  <script>AV.initialize("mpOMyFHLi7a5S0ka5mv3cz7C-gzGzoHsz", "3t0W0au9Mxf0lOGFDF8u89pc");</script>
  <script>
    function showTime(Counter) {
      var query = new AV.Query(Counter);
      var entries = [];
      var $visitors = $(".leancloud_visitors");

      $visitors.each(function () {
        entries.push( $(this).attr("id").trim() );
      });

      query.containedIn('url', entries);
      query.find()
        .done(function (results) {
          var COUNT_CONTAINER_REF = '.leancloud-visitors-count';

          if (results.length === 0) {
            $visitors.find(COUNT_CONTAINER_REF).text(0);
            return;
          }

          for (var i = 0; i < results.length; i++) {
            var item = results[i];
            var url = item.get('url');
            var time = item.get('time');
            var element = document.getElementById(url);

            $(element).find(COUNT_CONTAINER_REF).text(time);
          }
          for(var i = 0; i < entries.length; i++) {
            var url = entries[i];
            var element = document.getElementById(url);
            var countSpan = $(element).find(COUNT_CONTAINER_REF);
            if( countSpan.text() == '') {
              countSpan.text(0);
            }
          }
        })
        .fail(function (object, error) {
          console.log("Error: " + error.code + " " + error.message);
        });
    }

    function addCount(Counter) {
      var $visitors = $(".leancloud_visitors");
      var url = $visitors.attr('id').trim();
      var title = $visitors.attr('data-flag-title').trim();
      var query = new AV.Query(Counter);

      query.equalTo("url", url);
      query.find({
        success: function(results) {
          if (results.length > 0) {
            var counter = results[0];
            counter.fetchWhenSave(true);
            counter.increment("time");
            counter.save(null, {
              success: function(counter) {
                var $element = $(document.getElementById(url));
                $element.find('.leancloud-visitors-count').text(counter.get('time'));
              },
              error: function(counter, error) {
                console.log('Failed to save Visitor num, with error message: ' + error.message);
              }
            });
          } else {
            var newcounter = new Counter();
            /* Set ACL */
            var acl = new AV.ACL();
            acl.setPublicReadAccess(true);
            acl.setPublicWriteAccess(true);
            newcounter.setACL(acl);
            /* End Set ACL */
            newcounter.set("title", title);
            newcounter.set("url", url);
            newcounter.set("time", 1);
            newcounter.save(null, {
              success: function(newcounter) {
                var $element = $(document.getElementById(url));
                $element.find('.leancloud-visitors-count').text(newcounter.get('time'));
              },
              error: function(newcounter, error) {
                console.log('Failed to create');
              }
            });
          }
        },
        error: function(error) {
          console.log('Error:' + error.code + " " + error.message);
        }
      });
    }

    $(function() {
      var Counter = AV.Object.extend("Counter");
      if ($('.leancloud_visitors').length == 1) {
        addCount(Counter);
      } else if ($('.post-title-link').length > 1) {
        showTime(Counter);
      }
    });
  </script>
















</body>
</html>
